import router from '@/router'
import { ElMessage } from 'element-plus'
import { getToken } from '@/utils/auth'
import { getPageTitle } from '@/utils/getPageTitle'
import { start, close } from '@/utils/nprogress'
import { NavigationGuardNext, RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
import { store } from '@/store'

router.beforeEach(async (to:RouteLocationNormalized, from:RouteLocationNormalized, next:NavigationGuardNext) => {
  start() // 打开进度条
  // 设置页面标题
  document.title = getPageTitle(<string>to.meta.title)
  // setToken('auth_token')
  const hasToken = getToken()

  if (hasToken) {
    // 已登录
    if (to.path === '/login') {
      // 如果已登录，请重定向到主页
      next({ path: '/' })
      close()
    } else {
      // 用户已经登录 并且前往的是系统页面
      // 确定用户是否已通过getInfo获得其权限角色
      const hasRoles:boolean = store.getters.get_roles && store.getters.get_roles.length > 0
      if (hasRoles) { // 拥有角色
        next()
      } else {
        try {
          // 先请求获取用户角色
          await store.dispatch('getInfo')
          const accessedRoutes:Array<RouteRecordRaw> = await store.dispatch('generateRoutes')

          // 基于角色生成可访问的路线图
          accessedRoutes.forEach(route => router.addRoute(route))
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('resetToken')

          console.log(error, '有错误')
          ElMessage.error((error || '有错误') as string)
          next(`/login?redirect=${to.path}`)
          close()
        }
      }
    }
  } else {
    // 未登录 重定向到登录页面
    if (to.path === '/login') {
      // 在未登录情况下前往登录页面 直接放行
      next()
    } else {
      // 未登录前往需要登录权限的页面，重定向到登录页面
      next(`/login?redirect=${to.path}`)
      console.log(`/login?redirect=${to.path}`, '未登录想要前往的页面')
      close()
    }
  }
})
router.afterEach(() => {
  // 完成进度条
  close()
})
